<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- All JS functions -->
<script src="${contextPath}/static/js/page/mainChat.js"></script>
<!-- Chat -->
<div class="chat">
    
    <!-- Chat List -->
    <div class="pull-left chat-list">
        <div class="listview narrow">
            <div class="media">
                <img class="pull-left" src="${contextPath}/static/js/backstage/img/profile-pics/1.jpg" width="30" alt="">
                <div class="media-body p-t-5">
                    Alex Bendit
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="${contextPath}/static/js/backstage/img/profile-pics/2.jpg" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">David Volla Watkinson</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="${contextPath}/static/js/backstage/img/profile-pics/3.jpg" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Mitchell Christein</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="${contextPath}/static/js/backstage/img/profile-pics/4.jpg" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Wayne Parnell</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="${contextPath}/static/js/backstage/img/profile-pics/5.jpg" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Melina April</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="${contextPath}/static/js/backstage/img/profile-pics/6.jpg" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Ford Harnson</span>
                </div>
            </div>
            
        </div>
    </div>
    
    <!-- Chat Area -->
    <div class="media-body">
        <div class="chat-header">
            <a class="btn btn-sm" href="">
                <i class="fa fa-circle-o status m-r-5"></i> 与朋友聊天
            </a>
        </div>
    
        <div class="chat-body">
            <div class="media">
                <img class="pull-right" src="${contextPath}/static/js/backstage/img/profile-pics/1.jpg" width="30" alt="" />
                <div class="media-body pull-right">
                    Hiiii<br/>
                    How you doing bro?
                    <small>Me - 10 Mins ago</small>
                </div>
            </div>
            
            <div class="media pull-left">
                <img class="pull-left" src="${contextPath}/static/js/backstage/img/profile-pics/2.jpg" width="30" alt="" />
                <div class="media-body">
                    I'm doing well buddy. <br/>How do you do?
                    <small>David - 9 Mins ago</small>
                </div>
            </div>
            
            <div class="media pull-right">
                <img class="pull-right" src="${contextPath}/static/js/backstage/img/profile-pics/2.jpg" width="30" alt="" />
                <div class="media-body">
                    I'm Fine bro <br/>Thank you for asking
                    <small>Me - 8 Mins ago</small>
                </div>
            </div>
            
            <div class="media pull-right">
                <img class="pull-right" src="${contextPath}/static/js/backstage/img/profile-pics/2.jpg" width="30" alt="" />
                <div class="media-body">
                    Any idea for a hangout?
                    <small>Me - 8 Mins ago</small>
                </div>
            </div>
         
        </div>
    
        <div class="chat-footer media">
            <i class="chat-list-toggle pull-left fa fa-bars"></i>
            <i class="pull-right fa fa-picture-o"></i> 
            <div class="media-body">
                <textarea class="form-control" placeholder="Type something..."></textarea>
            </div>
        </div>
        
    </div>
</div>
